import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';
import 'package:flutter_code_framework/pages/lesson_publish.dart';

class BaseCenterBubbleButton extends AnimatedWidget {
  Function callBack;
  BaseCenterBubbleButton({Key key, Animation<double> animation, this.callBack})
      : super(key: key, listenable: animation,);

  // 0 视频；1 图文；2 音频； 3 小作业；
  var centerButtonItems = ['视频', '图文', '音频', '小作业'];
  var centerButtonItemIcons = [
    SFSymbols.camera_circle_fill,
    SFSymbols.doc_circle_fill,
    SFSymbols.play_circle_fill,
    SFSymbols.pencil_circle_fill
  ];

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    double _width = MediaQuery.of(context).size.width;
    double _itemHeight = 80;
    var _topButtonTween =
        new Tween<double>(begin: _itemHeight * -1, end: _itemHeight * 1.8);

    var _leftButtonLeftTween = new Tween<double>(
        begin: _width / 2 - _itemHeight / 2,
        end: _width / 2.7 - _itemHeight / 2);
    var _leftButtonBottomTween =
        new Tween<double>(begin: _itemHeight * -1, end: _itemHeight * 1.2);

    var _rightButtonRightTween = new Tween<double>(
        begin: _width / 2 - _itemHeight / 2,
        end: _width / 2.7 - _itemHeight / 2);
    var _rightButtonBottomTween =
        new Tween<double>(begin: _itemHeight * -1, end: _itemHeight * 1.2);

    var _bottomButtonTween =
        new Tween<double>(begin: _itemHeight * (-1), end: _itemHeight / 1.5);

    return Container(
      color: Colors.transparent,
      constraints: BoxConstraints.expand(
        height: MediaQuery.of(context).size.height -
            kBottomNavigationBarHeight -
            MediaQuery.of(context).padding.bottom -
            0,
        width: MediaQuery.of(context).size.width,
      ),
      child: //Text('ddddd'),
          Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            bottom: _topButtonTween.evaluate(animation),
            child: _getTabbarAnimationItem(context, 0),
          ),
          Positioned(
            left: _leftButtonLeftTween.evaluate(animation),
            bottom: _leftButtonBottomTween.evaluate(animation),
            child: _getTabbarAnimationItem(context, 1),
          ),
          Positioned(
            right: _rightButtonRightTween.evaluate(animation),
            bottom: _rightButtonBottomTween.evaluate(animation),
            child: _getTabbarAnimationItem(context, 2),
          ),
          Positioned(
            bottom: _bottomButtonTween.evaluate(animation),
            child: _getTabbarAnimationItem(context, 3),
          ),
        ],
      ),
    );
  }

  // 0 视频；1 图文；2 音频； 3 小作业；
  Widget _getTabbarAnimationItem(BuildContext context, int index) {
    return GestureDetector(
      child: Column(
        children: <Widget>[
          DecoratedBox(
            decoration: BoxDecoration(
              color: Theme.of(context).backgroundColor,
              // gradient: LinearGradient(
              //     colors: [G.specialColor, G.specialColor]), //背景渐变
              borderRadius: BorderRadius.circular(36.0), //3像素圆角
              // boxShadow: [
              //   //阴影
              //   BoxShadow(
              //       color: Theme.of(context).dialogBackgroundColor,
              //       offset: Offset(0.0, 0.0),
              //       blurRadius: 20.0)
              // ]
            ),
            child: Container(
              // color: Colors.black,
              constraints: BoxConstraints.expand(width: 58, height: 58),
              // padding: EdgeInsets.all(10),
              child: Icon(
                centerButtonItemIcons[index],
                size: 60,
                color: Theme.of(context).primaryColor.withOpacity(0.85),
              ),
            ),
          ),
          Container(
            color: Theme.of(context).backgroundColor,
            alignment: Alignment.center,
            child: Text(
            centerButtonItems[index],
            style: TextStyle(
                fontSize: 12,
                color: Theme.of(context).primaryTextTheme.headline3.color),
          ),),
        ],
      ),
      onTap: () {
        //收起动画 + 页面跳转
      callBack();
      //Navigator.of(context).pushNamed('/demo_sf_symbols');
      // Navigator.of(context).pushNamed('/demo_page');
        Navigator.of(context).push(new MaterialPageRoute(
        builder: (ctx) => LessonPublish(lessonType: centerButtonItems[index])));

      },
    );
  }
}
